<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

// 跳转到创建角色页面
const goToCreateCharacter = () => {
  router.push({ name: 'CharacterCreate' });
};

// 跳转到角色列表页面
const goToCharacterList = () => {
  router.push({ name: 'CharacterList' });
};
</script>

<template>
  <div class="page-home">
    <div class="content">
      <div class="logo-wrap">
        <img class="logo" src="@/assets/img/hedgehog-logo.svg" alt="" />
        <p class="text">刺猬，创作多样AI角色</p>
      </div>

      <div class="action-wrap">
        <div class="action-left-wrap">
          <div
            class="action bg-orange-100 text-orange-500"
            @click="goToCreateCharacter"
          >
            创建角色
          </div>
          <div
            class="action bg-sky-100 text-sky-600"
            @click="goToCreateCharacter"
          >
            AI角色生成
          </div>
        </div>

        <div class="my-project" @click="goToCharacterList">我的角色</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "tailwindcss";

.page-home {
  @apply h-full;

  > .content {
    @apply h-full flex items-center justify-center;

    > .logo-wrap {
      @apply w-1/4 text-center flex flex-col items-center mr-[10vw];

      > .logo {
        @apply w-[150px];
      }

      > .text {
        @apply text-[40px] font-bold text-neutral-950 mt-5;
      }
    }

    > .action-wrap {
      @apply flex;

      > .action-left-wrap {
        @apply w-50 flex flex-col justify-center gap-5;

        > .action {
          @apply cursor-pointer h-50 flex justify-center items-center rounded-xl text-[20px];

          &:hover {
            @apply opacity-80;
          }
        }
      }

      > .my-project {
        @apply w-50 bg-neutral-950 text-amber-50 rounded-xl ml-5 flex justify-center items-center text-[20px] cursor-pointer;

        &:hover {
          @apply opacity-80;
        }
      }
    }
  }
}
</style>
